<template>
    <div v-show="isShowPopDialog" class="pop-dialog-layout">
        <div class="pop-content-part" v-for="(item,index) in popDatas">
            <span @click="popHandlerClick(item)">{{item.text}}</span>
            <div v-if="index === (popDatas.length-1)" class="pop-driver-off-part"></div>
            <div v-else class="pop-driver-part"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "popWindowDialog",
        data() {
            return {

            }
        },
        props: {
            isShowPopDialog: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            popDatas: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            popHandlerClick(item) {
                this.$emit('pop-handler', {popObject: item}); // 通知外面
            }
        },
        computed: {
            popDriverObject: function () {

            }
        }
    }
</script>

<style lang="scss">
    .pop-dialog-layout {
        background: #3cc8a8;
        width: 20%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        border-radius: 0.1rem;
        z-index:200;
        position: fixed;

        .pop-content-part {
            color: #e6e6e6;
            font-size: 1em;
            padding-top: 0.14rem;

            .pop-driver-part {
                padding-bottom: 0.14rem;
                border-bottom: 1px solid #e6e6e6;
            }

            .pop-driver-off-part {
                padding-bottom: 0.14rem;
            }

        }


    }
</style>